<template>
  <div class="mine">
    <div class="top">
      <img src="@/assets/1.png" alt="">
      <img src="@/assets/7.png" alt="" class="m1">
    </div>
   <!-- <button @click="logoutHandler">退出登录</button> -->
   <div class="main">
     <ul>
       <li>
         <img src="@/assets/2.png" alt="">
         <span @click="addCartHandler">商品订单</span>
       </li>
       <li>
         <img src="@/assets/3.png" alt="">
         <span>会员红包</span>
       </li>
       <li>
         <img src="@/assets/4.png" alt="">
         <span>余额</span>
       </li>
       <li>
         <img src="@/assets/6.png" alt="">
         <span @click="toHandler">收货地址</span>
       </li>
       <li>
         <img src="@/assets/5.png" alt="">
         <span>设置</span>
       </li>
     </ul>
   </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'Mine',
  methods: {
    ...mapActions(['logoutAsync']),
    logoutHandler() {
      this.logoutAsync().then(res => {
        this.$router.push('/')
      })
    },
    toHandler() {
      this.$router.push('/register')
    },
    addCartHandler() {
      this.$router.push('/Cart')
    }
  }
}
</script>

<style lang="scss" scoped>
.top{
  width: 100%;
  height: 200px;
  margin-top: -60px;
  img{
    width: 100%;
    height: 200px;
    position: relative;
  }
  .m1{
    position: absolute;
    left: 40px;
    top: 60px;
    width: 63px;
    height: 63px;
    border-radius: 35px;
    margin-right: 20px;
    border: 2px solid #fff;
  }
}
ul{
  width: 100%;
  li{
    width: 320px;
    height: 49px;
    margin: 15px 35px 5px 30px;
    border-bottom: 1px solid gainsboro;
    img{
      width: 20px;
      height: 20px;
      margin-top: 15px;
    }
    span{
          margin-left: 15px;
        color: #191a1b;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
  }
}

</style>
